<template>
	<view class="container">
		<view class="nav">
			<view class="nav-item" :class="{'nav-active':navId==1}" data-id="1" @click="chooseNav">
				{{title}}
			</view>
			<view class="nav-item" :class="{'nav-active':navId==2}" data-id="2" @click="chooseNav">
				自定义文案
			</view>
		</view>
            <view style="height: 100rpx;width: 100%;">
            	
            </view>
		<view class="" v-if="navId==1">
			<block v-for="item,index in wenanList" :key="item">
				<view class="wenan">
					<view class="tip">
						爆款文案{{index+1}}
					</view>
					<view class="content" @click="choose(item)">
						<textarea style="height: 180rpx;width: 100%;flex-wrap: wrap;" v-model="item.textContent"></textarea>
						<!-- <rich-text :nodes="item.textContent"></rich-text> -->
					</view>
					
					<image v-if="item.id==chooseWenan.id" src="../../static/images/youxiajiaoxuanzhong.png" style="position: absolute;bottom: 0;right: 0;height: 50rpx;width: 50rpx"></image>
				</view>
			</block>
			<view class="footer-tip">
				<view>
					此处仅展示10条案例文案
				</view>
				<view>
					视频制作时从10000+条文案随机智能匹配
				</view>
			</view>
		</view>

		<view v-if="navId==2">
			<view class="zidingyi-btn" @click="openZidingyi">
				+添加自定义文案
			</view>
			<block v-for="item,index in zidingyiList" :key="item">
				<view class="wenan" @click="choose(item)">
					<view class="tip">
						第{{index+1}}个文案
					</view>
					<view class="content" style="display: flex;align-items: center;justify-content: space-between;">
						<rich-text :nodes="item.textContent" style="flex:1"></rich-text>
						<image src="../../static/images/delete.png" style="width: 46rpx;height: 46rpx" @click.stop="del(item.id)"></image>
					</view>
					<image v-if="item.id==chooseWenan.id" src="../../static/images/youxiajiaoxuanzhong.png" style="position: absolute;bottom: 0;right: 0;height: 50rpx;width: 50rpx"></image>
				</view>
			</block>
		</view>
		<view style="height: 130rpx;width: 100%;"></view>
		<view class="sure">
			<view class="next-btn" @click="nextHandle">换一批</view>
			<view class="sure-btn" @click="leave">确定</view>
		</view>

		<!-- 自定义文案模态框 start -->
		<uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="bottom">
			<view class="radius">
				<view class="header">
					<view>自定义文案</view>
					<view style="font-weight: normal;font-size: 48rpx;color: #666" @click="closeZidingyi">x</view>
				</view>
				<view class="header-tip">
					当前所选行业：企业工厂-网络公司；默认优先使用自定义。
				</view>
				<view class="huati-box">

					<editor id="editor" class="editor" style="height: 150rpx;" placeholder="开始输入..." @ready="onEditorReady">
					</editor>
				</view>
				<view class="tip">
					提示：一行只能展示12个字，请手动换行，最多四行
				</view>
				<view class="huati-footer">
					<view class="cancel" @click="cancelZidingyi">
						取消
					</view>
					<view class="submit" @click="submit">
						确定
					</view>
				</view>
			</view>

		</uni-popup>
		<!-- 字自定义文案模态框 start -->
	</view>
</template>

<script>
	import Http from "@/utils/http"
	const http = new Http()
	export default {
		data() {
			return {
				navId: 1,
				title:"企业工厂-网络公司",
				wenanList: [],
				zidingyiList:[],
				editorCtx: {},
				chooseWenan:{},
				cateage:null

			}
		},
		async onLoad(options) {
			if(options.title!=undefined){
				this.title = options.title
			}
			this.cateage = options.cateage
			this.getWenan(options.cateage)
			// let res = await http.get("v1/wenan/list")
			// this.wenanList = res.data.data
		},
		onShow() {

		},
		
		methods: {
			choose(item){
				this.chooseWenan = item
			},
			getWenan(cateage){
				http.get("v1/wenan/list?cateage="+cateage).then(res=>{
					this.wenanList = res.data.data
				})
							  
			},
			//换一批
			nextHandle(){
				this.chooseWenan = {}
				if(this.navId==1){
					this.getWenan(this.cateage)
				}else{
					this.getZidingyiWenan(this.cateage)
				}
			},
              getZidingyiWenan(cateage){
				 http.get("v1/wenan/zidingyiList?cateage="+this.cateage).then(res=>{
				 	this.zidingyiList = res.data.data
				 }) 
			  },
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context;
				}).exec()

			},
			chooseNav(e) {
				console.log(e);
				let id = e.currentTarget.dataset.id
				this.navId = id
				if(id==1){
					this.getWenan(this.cateage)
				}else{
					this.getZidingyiWenan(this.cateage)
				}
			},
			 getRandomArrayElement(arr) {
			  if (!Array.isArray(arr) || arr.length === 0) return undefined;
			  const randomIndex = Math.floor(Math.random() * arr.length);
			  return arr[randomIndex];
			},
			leave() {
				if(this.chooseWenan.textContent!=undefined){
						var pages = getCurrentPages()
						var prePage = pages[pages.length - 2]
						prePage.$vm._data.isChoosed = true
						prePage.$vm._data.form.content = this.chooseWenan.textContent
						let line = this.chooseWenan.textContent.split('\n');
						prePage.$vm._data.form.contentList = line;
					   prePage.$vm.getMusic(this.chooseWenan.classes)
						uni.navigateBack({
							delta: 1
						})
				}else{
					uni.showToast({
						title:"请选择一条文案,或直接返回上一个页面",
						icon:"none"
					})
				}

			},
			submit() {
				let that = this
				this.editorCtx.getContents({
					success: function(editor) {
						console.log("=====",editor.html);
						http.post("v1/wenan/addZidingyi",{
							"type":2,
							"cateage":that.cateage,
							"textContent":editor.html,
						}).then(res=>{
							if (res.data.code == 200) {
								
								that.$refs.popup.close()
								that.getZidingyiWenan()
								return uni.showToast({
									title: "添加成功",
									icon: "none"
								})
							} else {
								return uni.showToast({
									title: "添加失败",
									icon: "none"
								})
							}
						})
					},
				})
			this.editorCtx.clear()
			},
			cancelZidingyi(){
				// uni.navigateBack({
				// 	delta:1
				// })
				this.$refs.popup.close()
			},
			closeZidingyi(){
				this.$refs.popup.close()
			},
			openZidingyi(){
				this.$refs.popup.open()
			},
			del(id){
				let that = this
				uni.showModal({
					cancelText:"取消",
					confirmText:"确定",
					title:"是否删除该自定义文案",
					success: (confirm) => {
						if(confirm.confirm){
							http.post("v1/wenan/delZidingyi",{
								"id":id
							}).then(res=>{
								if (res.data.code == 200) {
									
									that.$refs.popup.close()
									that.getZidingyiWenan()
									return uni.showToast({
										title: "删除成功",
										icon: "none"
									})
								} else {
									return uni.showToast({
										title: "删除失败",
										icon: "none"
									})
								}
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f1f1f1;
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		display: flex;
		font-size: 34rpx;
		justify-content: space-between;
		height: 90rpx;
		align-items: center;
		padding: 0 30rpx;
		background: #fff;
		border-bottom: 1rpx solid #eee;
	

	}

	.wenan {
		margin: 30rpx;
		border-radius: 16rpx;
		background: #fff;
		position: relative;

		.tip {
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			background: rgb(14, 16, 101);
			border-bottom-right-radius: 16rpx;
			border-top-left-radius: 16rpx;
			color: #fff;
			text-align: center;
		}

		.content {
			font-size: 32rpx;
			padding: 20rpx;
		}
	}

	.footer-tip {
		width: 100%;
		font-size: 28rpx;
		color: rgb(14, 16, 101);
		text-align: center;
	}

	.sure {
		position: fixed;
		height: 100rpx;
		z-index: 99;
		background: #fff;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
        .next-btn{
			width: 32%;
			background: #ff0000;
			color: #fff;
			height: 70rpx;
			line-height: 70rpx;
			margin-top: 15rpx;
			margin-left: 5%;
			font-size: 32rpx;
			border-radius: 35rpx;
			text-align: center;
		}
		.sure-btn {
			width: 50%;
			background: rgb(14, 16, 101);
			color: #fff;
			height: 70rpx;
			line-height: 70rpx;
			margin-top: 15rpx;
			margin-left: 5%;
			font-size: 32rpx;
			border-radius: 35rpx;
			text-align: center;
			margin-right: 30rpx;
		}
	}

	.zidingyi-btn {
		margin: 30rpx;
		background: #fff;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		text-align: center;
		border-radius: 40rpx;
		border: 1rpx solid rgb(14, 16, 101);
		color: rgb(14, 16, 101);
	}

	//自定义话题
	.radius {
		height: 680rpx;
		background: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		overflow: hidden;
		border: 1rpx solid #fff;
		position: relative;


		.header {
			font-size: 36rpx;
			font-weight: bold;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			margin: 0 30rpx;

		}

		.header-tip {
			font-size: 28rpx;
			padding: 20rpx 30rpx;
		}

		.huati-box {
			display: flex;
			padding: 10rpx 30rpx 20rpx 30rpx;
			align-items: center;
			

			
		}

		.tip {
			font-size: 28rpx;
			color: red;
			margin-left: 30rpx;

		}

		.huati-footer {
			display: flex;
			margin: 30rpx 30rpx 20rpx 30rpx;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: bold;

			.cancel {
				width: 42%;
				height: 80rpx;
				background: #eee;
				line-height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
			}

			.submit {
				width: 42%;
				height: 80rpx;
				background: #00008B;
				line-height: 80rpx;
				color: #fff;
				border-radius: 40rpx;
				text-align: center;
			}
		}
	}
.editor{
	font-size: 32rpx;
	color: #333;
	border: 1rpx solid #eee;
    padding: 20rpx;	
	min-height: 300rpx !important;
}
	.nav-active {
		color: rgb(14, 16, 101);
	}
</style>